/* 布局 */

.fl-jcbe,
.flJcbe {
	/* 两端对齐 项目之间的间隔相等 左右靠边 */
	display: flex;
	justify-content: space-between;
}

.fl-jcar,
.flJcar {
	/* 每个子元素两侧的间隔相等，
  元素与元素之间间隔比元素与边框的间隔大一倍*/
	display: flex;
	justify-content: space-around;
}

.fl-jcev,
.flJcev {
	/* 每个子元素两侧的间隔相等，
  元素与元素之间间隔比元素与边框的间隔相等*/
	display: flex;
	justify-content: space-evenly;
}

.fl-jcc-aic,
.flJccAic,
.flCenter,
.flCen,
.fl-center,
.fl-cen {
	/* 水平垂直居中 */
	display: flex;
	justify-content: center;
	align-items: center;
}

.fl-jcc,
.flJcc {
	/* x轴 水平居中 */
	display: flex;
	justify-content: center;
}

.fl-aic,
.flAic {
	/* y轴 垂直居中 */
	display: flex;
	align-items: center;
}

.fl-jcend,
.flJcend {
	/* x轴 倒序排放 */
	display: flex;
	justify-content: flex-end;
}

/*  转换列(竖)轴方向  */
.fl-fdcol,
.flFdcol {
	display: flex;
	flex-direction: column;
}

.fl-fdcol-jcbe,
.flFdcolJcbe {
	/* 两端对齐 项目之间的间隔相等 左右靠边 
	   换列轴*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fl-fdcol-jcbe,
.flFdcolJcar {
	/* 子元素与边框的间隔大一倍 
	   换列轴*/
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.fl-fdcol-jcev,
.flFdcolJcev {
	/* 子元素与边框的间隔相等
	   换列轴*/
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.flWr,
.fl-wr {
	/* 开启换行 */
	display: flex;
	flex-wrap: wrap;
}

.fl-jcbe-wr,
.flJcbeWr {
	/* 子元素左右靠边
	   并且要换行 */
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.fl-jcev-wr,
.flJcevWr {
	/* 子元素左右靠边
	   并且要换行 */
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.fl-jcev-wr,
.flJcevWr {
	/* 子元素左右靠边
	   并且要换行 */
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}


.fl-jcar-aic,
.flJcarAic {
	/* 子元素与边框的间隔大一倍
	   竖轴居中*/
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.fl-jcev-aic,
.flJcevAic {
	/* 子元素与边框的间隔相等
	   竖轴居中*/
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.fl-jcbe-aic,
.flJcbeAic {
	/* 两端对齐 项目之间的间隔相等 左右靠边 
	   竖轴居中*/
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.poFix,
.po-fix {
	/* 固定定位 */
	position: fixed;
}

.poAb,
.po-ab {
	/* 绝对定位  */
	position: absolute;
}

/* 定位水平垂直居中 */
.po-re,
.poRe {
	/* 父元素相对定位 */
	position: relative;
}

.poab-center,
.poabCenter,
.poab-cen,
.poabCen {
	/* 子元素绝对定位 */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* 开启flex 横向布局 */
.flex {
	display: flex;
}

/* 横向局中 */
.jc-c,
.jcC {
	justify-content: center;
}

/* 竖向居中 */
.ai-c,
.aiC {
	align-items: center;
}

.flex1 {
	flex: 1;
}

.flex2 {
	flex: 2;
}

.flex3 {
	flex: 3;
}

.borRa50bai {
	border-radius: 50%;
}

/* 隐藏边框 */
.bor0 {
  border: none;
}

/* 转换平移X轴y轴分别负-50% */
.tranXY-fu50bai {
	transform: translate(-50%, -50%);
}

.mg0 {
	margin: 0;
}

.pad0 {
	padding: 0;
}

/* 鼠标箭头移入变小手 */
.cu-po,
.cuPo {
	cursor: pointer;
}

/* 图片与文字居中 */
.vaM,
.va-m {
	vertical-align: middle;
}

.mg0Auto,
.mg-0auto {
	/* 块级元素水平居中 */
	margin: 0 auto;
}

.mgAuto,
.mg-auto {
	margin: auto;
}

.taL,
.ta-l {
	/* 行内元素水平靠左 */
	text-align: left;
}

.taR,
.ta-r {
	/* 行内元素水平靠右 */
	text-align: right;
}

.taC,
.ta-c {
	/* 行内元素水平居中 */
	text-align: center;
}

.wh-100bai,
.wh100bai {
	width: 100%;
	height: 100%;
}

.w-100vw,
.w100vw {
	/* 浏览器可视窗口宽度的100% */
	width: 100vw;
}

.h-100vh,
.h100vh {
	/* 浏览器可视窗口高度的100% */
	height: 100vh;
}

.wh100vwh,
.wh-100vwh {
	width: 100vw;
	height: 100vh;
}
/* 字体大小 */
/* 加粗 */
.fwB,
.fw-b,
.fw700 {
  font-weight: bolder;
}
/* 字体倾斜 */
.fs-ob,
.fsOb {
  font-style: oblique;
}

/* 溢出隐藏、清除浮动、解决外边距塌陷 不占位 */
.oh {
	overflow: hidden;
}

/* 显示滚动条 */
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
.os-xy,
.os-yx {
	/* x 轴 和 y 轴显示滚动条 */
	overflow: scroll;
}

.os-x {
	/* x 轴 显示滚动条 */
	overflow-x: scroll;
}

.os-y {
	/* y 轴 显示滚动条 */
	overflow-y: scroll;
}

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */

.oa-xy,
.oa-yx {
	/* x 轴 和 y 轴显示滚动条 */
	overflow: auto;
}

.oa-x {
	/* x 轴 显示滚动条 */
	overflow-x: auto;
}

.oa-y {
	/* y 轴 显示滚动条 */
	overflow-y: auto;
}

.disIn {
	/* 转换行内元素 */
	display: inline;
}

.disInbl {
	/* 转换行内块元素 */
	display: inline-block;
}

.disBl {
	/* 转换块元素 */
	display: block;
}



/* 输入框改变文字颜色 */
/* input[type="text"]::-webkit-input-placeholder {
  color: #b3b9c7;
} */

/* 文本溢出隐藏 后面数字表示几行*/

.ohText,
.oh-text {
	/* 强制在同一行内显示所有文本 */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.ohText-2,
.oh-text-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ohText-3,
.oh-text-3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* 字体样式 */
/* 颜色 */
.color-white,
.color-fff,
.colorFff {
	color: #ffffff;
}

.color-black,
.color222 {
	color: #222222;
}



.color-gry,
.color999 {
	color: #999999;
}

.color-gry2 {
	color: #88889e;
}

.color-gry3 {
	color: #565670;
}

.colorGryLight,
.color-gry-light,
.color666 {
	color: #666666;
}

.color-red,
.colorRed,
.color222 {
	color: #f92222;
}

.color-blue,
.colorBlue {
	color: #198aff;
}

.colorBlueDuck,
.color-blue-duck {
	color: #4f87c9;
}

.color-green,
.colorGreen {
	color: #00c895;
}

.color-orange,
.colorOrange {
	color: #ff7a06;
}

.color-ccc,
.colorCcc {
	color: #cccccc;
}

/* 背景颜色 */

/* 背景透明  */
.bgc-trans,
.bgcTrans {
	background-color: transparent;
}

.bgcCcc,
.bgc-ccc {
	background-color: #cccccc;
}

.bgc222 {
	background-color: #222222;
}

.bgc333 {
	background-color: #333333;
}

.bgc666 {
	background-color: #666666;
}

.bgc999 {
	background-color: #999999;
}

.bgcBlack,
.bgc-black,
.bgc000 {
	background-color: #000000;
}

.bgcWhite,
.bgc-white,
.bgcFff,
.bgc-fff {
	background-color: #ffffff;
}

.bgcRed,
.bgc-red {
	background-color: #9c0d0d;
}

.bgcRed2,
.bgc-red2 {
	background-color: #e51539;
}

.bgcGreen,
.bgc-green {
	background-color: #0c8e78;
}

.bgcGreen2,
.bgc-green2 {
	background-color: #24c28c;
}

.bgcGry,
.bgc-gry {
	background-color: #888888;
}



.bgpo-cen,
.bgPoCen {
	background-position: center;
}

.bgpo-top,
.bgpoTop {
	background-position: top;
}

.bgreNo,
.bgre-no {
	background-repeat: no-repeat;
}

.bgSi100bai,
.bg-si100bai,
.bg-si-100bai {
	background-size: 100%, 100%;
}

/* 透明度 用于遮挡背景图片*/

.op-0,
.op0 {
	opacity: 0;
}

.op-01,
.op01 {
	opacity: 0.1;
}

.op-02,
.op02 {
	opacity: 0.2;
}

.op-03,
.op03 {
	opacity: 0.3;
}

.op-04,
.op04 {
	opacity: 0.4;
}

.op-05,
.op05 {
	opacity: 0.5;
}

.op-06,
.op06 {
	opacity: 0.6;
}

.op-07,
.op07 {
	opacity: 0.7;
}

.op-08,
.op08 {
	opacity: 0.8;
}

.op-09,
.op09 {
	opacity: 0.9;
}

/* css权重问题 */
.z-index111 {
	z-index: 111;
}

.z-index222 {
	z-index: 222;
}

.z-index333 {
	z-index: 333;
}

.z-index444 {
	z-index: 444;
}

.z-index555 {
	z-index: 555;
}

.z-index666 {
	z-index: 666;
}

.z-index777 {
	z-index: 777;
}

.z-index888 {
	z-index: 888;
}

.z-index999 {
	z-index: 999;
}


